<template>
  <border-box4>
    <div>
      <span
        >更新时间: <span ml-20>{{ data?.updatedTime }}</span></span
      >
    </div>
    <div>
      <span
        >电柜编号: <span ml-20>{{ data?.boxCode }}</span></span
      >
    </div>
    <div>
      <span
        >电柜状态: <span ml-20>{{ formatOnlineStatus(data?.boxOnlineStatus) }}</span></span
      >
    </div>
    <div grid grid-cols-2 grid-rows-1 justify-between w-full>
      <span
        >60V可换 <span ml-20>{{ data?.battery60VCount }}</span></span
      >
      <span
        >48V可换 <span ml-20>{{ data?.battery48VCount }}</span></span
      >
    </div>
  </border-box4>
</template>

<script setup lang="ts">
import { queryBoxDetectionResponseData } from '@/api/batteryswap/types/batteryswap'
import BorderBox4 from '@/components/basic/BorderBox4.vue'
defineProps<{
  data: queryBoxDetectionResponseData
}>()
/** 网络状态转换 */
const formatOnlineStatus = (status?: string) => {
  switch (status) {
    case '0':
      return '断网'
    case '1':
      return '联网'
    default:
      return '未知'
  }
}
</script>
<style lang="scss" scoped></style>
